<template>
  <div class="m-main bg-color font-color" >
    <!-- 轮播 -->
    <div class="carousel">
      <div class="title">
        <p class="title_text">{{$t('myAdd.home.platform')}}</p>
        <p class="title_text_des"><span>{{$t('myAdd.home.salf')}}</span><span>{{$t('myAdd.home.trust')}}</span><span>{{$t('myAdd.home.convenient')}}</span><span>{{$t('myAdd.home.efficient')}}</span></p>
      </div>
      <div class="banner">
        <homeSwiper :sildePage = "sildePage"></homeSwiper>
        <!-- start 公告 -->
        <div class="noticeBox" v-if="notice">
          <!--<i class="horn icon-broadcast"></i>-->
          <div class="noticeDiv">
            <p class="noticeCont"><Notice :notices = 'notice'></Notice></p>
          </div>
        </div>
        <!-- END 公告 -->
      </div>
    </div>
    <div class="main-content">
      <div class="siteTabParent" v-if="itemArray.length > 1">
        <ul class="siteTab clearfix">
          <li v-for="(item, index) in itemArray"
              :key='index'
              :class="{selected: currentItem === item}"
              @click="switchItem(item)">
            {{itemArrayText[index].text}}
          </li>
        </ul>
      </div>
      <template v-for="(item, index) in itemArray" >
        <div :key='index'>
          <div>
            <!-- 交易所市场 -->
            <market-ex></market-ex>
          </div>
        </div>
      </template>
      <div class="prompt" v-show="false">
        <b>{{prompt}}</b>
      </div>
    </div>
    <!-- 以下是胖虎添加的内容 -->
    <bizuActive></bizuActive>
    <push-dialog></push-dialog>
    <p v-if="!public_info"></p>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import homeSwiper from '../../../components/addPage/common/banner'  // 轮播组件
import marketEx from './ex.vue'// 引入交易所的首页
import marketOtc from './otc.vue'// 引入场外的首页
import eventBus from '../../../apis/bus'  // 引入bus
import bizuActive from './addVue/bizuActive' // 引入胖虎添加的组件
import Notice from '../../../components/addPage/notice/notices' // 引入公告轮播组件
import pushDialog from './addVue/pushDialog' // 引入推送弹窗

export default {
  name: 'm-main',
  components: {
    marketEx,
    marketOtc,
    homeSwiper,
    bizuActive,
    Notice,
    pushDialog
  },
  data () {
    return {
      firstFlag: null,
      baseData: {},
      sildePage: [],
      isArr: [], // 轮播图数据
      mack: 0,   // 图片索引
      time: null, // 定时器
      notice: null,  // 公告
      host: this.$store.state.baseData._webSiteInfo,
      prompt: this.$store.state.baseData.prompt,
      itemArray: [],
      currentItem: null,
      moreSite: false,
      myMarket: localStorage.getItem('myMarket')
        ? localStorage.getItem('myMarket').split(',')
        : []
    }
  },
  mounted () {
    this.getLundata()
    this.getNotcies()
    let siteType = window.siteType || ['ex']
    this.itemArray = siteType
    this.currentItem = this.itemArray[0]

    // 以下是胖虎添加的内容
    if (this.$route.fullPath === '/index') {
      this.setHeaderStyle()
    }
    // 监听滚轮事件
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    this.setRestore()
    window.removeEventListener('scroll', this.handleScroll)
  },
  computed: {
    ...mapState({
      public_info ({baseData}) {
        if (baseData.isReady && this.firstFlag) {
          this.baseData = baseData
          this.prompt = baseData.prompt
          this.firstFlag = false
          return true
        } else {
          return true
        }
      }
    }),
    itemArrayText () {
      return [
        {
          text: '币币市场',
          val: 'ex'
        },
        {
          text: '场外市场',
          val: 'otc'
        },
        {
          text: '合约市场',
          val: 'co'
        }
      ]
    }
  },
  watch: {
    // 监听 语言切换
    '$store.state.baseData._lan' (val, old) {
      // 重新请求轮播图
      if (old) {
        this.getLundata()
        this.getNotcies()
      }
    },
    '$store.state.baseData.prompt' (val) {
      this.prompt = val
    }
  },
  methods: {
    notices (i) {
      localStorage.setItem('ntId', i)
      this.$router.push({name: 'notice_info', query: { ntId: i }})
    },
    // 切换Tab
    switchItem (type) {
      this.currentItem = type
    },
    // 获取公告
    getNotcies () {
      this.axios({
        url: this.$store.state.url.notice.notice_list,
        headers: {},
        params: {},
        method: 'post'
      }).then((res) => {
        if (res.code.toString() === '0') {
          res = res.data.noticeInfoList
          if (res.length > 3) {
            let RES = res.splice(0, 3)
            this.notice = RES
          } else {
            this.notice = res
          }
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
      })
    },
    getLundata () {
      this.axios({
        url: this.$store.state.url.common.index_data,
        headers: {},
        params: {},
        method: 'post'
      }).then((data) => {
        if (data.code === '0') {
          // this.notice = data.data.noticeInfo
          let res = data.data.cmsAdvertList
          if (res.length > 0) {
            // this.isArr = []
            let arr = []
            for (let i = 0; i < res.length; i++) {
              const page = Math.floor(i / 4)
              if (!arr[page]) {
                arr[page] = []
              }
              let obj = {}
              // obj.html = '<div><img src="' + res[i].imageUrl + '"></div>'
              obj.imageUrl = res[i].imageUrl
              obj.httpUrl = res[i].httpUrl
              arr[page].push(obj)
              // this.isArr.push(res[i])
            }
            // 如果最后一个轮播图里面的小图数据少于4个,补空格
            if (arr[arr.length - 1].length < 4) {
              let leng = 4 - arr[arr.length - 1].length
              for (let k = 0; k < leng; k++) {
                arr[arr.length - 1].push(arr[0][k])
              }
            }
            this.sildePage = arr
          }
        } else {
          this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
        }
      })
    },
    // onTap (data) {
    //   window.open(this.isArr[data.currentPage].httpUrl)
    // }
    // 重置header的样式
    setHeaderStyle () {
      eventBus.$emit('changeHeaderStyle', '{"fix": true}')
    },
    // 恢复header的样式
    setRestore () {
      eventBus.$emit('reHeaderStyle', '{"fix": false}')
    },
    // 头部导航恢复底色
    setRestoreB () {
      eventBus.$emit('reHeaderStylegBg', '{"bg": true}')
    },
    // 页面滚动事件
    handleScroll () {
      const top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      if (top > 30) {
        this.setRestoreB()
      } else {
        this.setHeaderStyle()
      }
    }
  }
}
</script>

